<template>
<div class="login-all">
  <div class="login_form">
    <div style="height:58px;"></div>
    <div class="login_form_top">
      <img class="" src="@/assets/登录页-中信建投LOGO.png">&nbsp;
      <span>中信建投资产配置服务</span>
    </div>
    <div style="height:38px;"></div>

    <div class="login_form_input">
      <a-input class="input" round v-model="phone" v-focus="userFocus" style="width:220px;" placeholder="请输入手机号" @keyup.enter.native="login" />
      <el-button size="mini" :disabled="disable==1?true:false" style="width:102px;" @click="getCode"><span>{{codeText}}</span></el-button>
      <div style="height:18px;">
      </div>
      <a-input v-model="password" round style="width:328px;text-align:left" placeholder="请输入验证码" @keyup.enter.native="login" />
    </div>
    <div class="login_form_button">
      <el-button size="mini" type="danger" round class="login_btn_confirm" @click="login"><span class="loginText">登录</span></el-button>
    </div>

  </div>

  <!-- <div style='font-size:12px;color:#fff;position: absolute;
    right: 5px;
    bottom: 15px;'>本系统支持1280*720及以上屏幕分辨率，不建议使用放大模式</div> -->
</div>
</template>

<script>
//  import { userLogin } from '../../api/api';
import '@/style/login.css'
import md5 from 'js-md5';
export default {
  data() {
    return {
      buttonType: "",
      userFocus: true,
      phone: '',
      password: '',
      accountName: '',
      isBtnLoading: false,
      codeText: '获取验证码',
      disable: 0, // 禁用样式控制 1----禁用
      time: 60 // 默认时间
    }
  },
  created() {

  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
  computed: {

  },
  methods: {
    validate() {
      //手机号正则式
      let regPho = /^1[0-9]{10}$/
      if (!regPho.test(this.phone)) {
        this.$message.error('请填写正确的手机号码!');
        return false
      } else {
        return true
      }
    },

    getCode() {
      if (this.validate()) {
        if (this.disable === 0) {
          //倒计时
          this.disable = 1
          let that = this
          that.codeText = '60s后重发'
          let timer = setInterval(function () {
            if (that.time > 1) {
              that.time--
              that.codeText = that.time + 's后重发'
            } else {
              clearInterval(timer)
              timer = null
              that.disable = 0
              that.time = 60
              that.codeText = '获取验证码'
            }
          }, 1000)
          // 请求接口获取验证码
          let param = {
            "mobile": this.phone,
          }
          this.$http.post(this.$url.phoneUrl, param).then(res => {
            if (res.success == true) {
              // 短信验证码发送成功
              this.$message.error("已发送短信验证码，请注意接收");
            } else if (res.success == "failure") {
              this.$message.error("无访问权限");
            } else {
              this.$message.error(res.message);
            }
          }).catch(err => {
            clearInterval(timer)
            timer = null
            that.disable = 0
            that.time = 60
            that.codeText = '重新获取'
            this.$message.error("获取验证码失败，请重新获取");
          })
        }
      }
    },

    login() {
      if (this.phone && this.password) {
        let param = {
          "mobile": this.phone,
          "code": md5(this.password + "_csc"),
        }

        // if(!localStorage.getItem('token')){
        // 生产
        this.$http.post(this.$url.loginUrl, param)

          //本地
          // this.$http.get("/index/institutionalsms/login/accountName/"+this.phone+"/psd/"+md5(this.password+"_csc")+"/system/0001")
          // 66
          // this.$http.get("/institutionalsms/login/accountName/"+this.phone+"/psd/"+md5(this.password+"_csc")+"/system/0001")
          .then(res => {
            if (res.success == true) {
              res.data.profession.map(item => {
                if (item.sysName == "资产配置系统") {
                  sessionStorage.setItem('token', item.token)
                  sessionStorage.setItem('tabArray', JSON.stringify(item))
                  sessionStorage.setItem('accountName', item.users.userName)
                  sessionStorage.setItem('email', item.users.email)
                  this.$message.info(res.message);
                  this.$router.replace('/views/Home');
                } else {
                  this.$message.error("此用户没有资产配置权限");
                }
              })
            } else {
              this.$message.error(res.message);
            }
          });
        // }

      } else {
        if (!this.phone) {
          this.$message.error('请输入手机号');
          return;
        }
        if (!this.password) {
          this.$message.error('请输入验证码');
          return;
        }
      }
    },
  }
}
</script>

<style>
body {
  margin: 0px;
  padding: 0px;
}

.login-all {
  background-image: url('/static/login.png');
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}

.login_form {
  height: 365px;
  width: 434px;
  background: #FFC8B4;
  margin-top: 10%;
  margin-left: 60%;
  /* opacity:0;
   filter:"alpha(opacity=0)";
  -ms-filter:"alpha(opacity=0)"; */
}

.login_form_top {
  text-align: center;
  font-size: 20px;
  line-height: 32px;
  height: 32px;
  font-weight: bold;
}

.login_form_input {
  text-align: center;
  font-size: 15px;
}

.login_form_button {
  text-align: center;
  margin-top: 30px;
}

.login_btn_confirm {
  width: 328px;
  color: #000;
  background: #CD3833;
}

.login_form_input .ant-input {
  border-radius: 40px !important;
}
</style>
